<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-blid</title>
  </head>
  <body>
    <pre>
         v-model:的层原理=v-bind：绑定属性，v-on:input监听输入内容

         @input="input"
        
         @input="value=$event.target.value"
       
      </pre
    >

    <div class="box">
      <!-- 1: -->
      <input type="text" v-bind:value="value" @input="input" />

      <!-- 2: -->
      <!-- 注意点:使用内嵌形式的时候e事件需要使用$event -->
      <input
        type="text"
        v-bind:value="value"
        @input="value=$event.target.value"
      />

      <div>{{value}}</div>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: '.box',
        data: {
          url: 'https://www.baidu.com',
          sina: 'sina.cn',
          alt: 'baidu',
          title: ':href百度',
          value: 'input',
        },
        methods: {
          input(e) {
            this.value = e.target.value
          },
        },
      })
    </script>
  </body>
</html>
